<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>库存盘点记录</title>
    <%@include file="/comm/head.jsp"%>
    <style>
        .ivu-table .demo-table-info-row td{
            background-color: #2db7f5;
            color: #fff;
        }
        .ivu-table .demo-table-error-row td{
            background-color: #ff6600;
            color: #fff;
        }
        .ivu-table td.demo-table-info-column{
            background-color: #2db7f5;
            color: #fff;
        }
        .ivu-table .demo-table-info-cell-name {
            background-color: #2db7f5;
            color: #fff;
        }
        .ivu-table .demo-table-info-cell-age {
            background-color: #ff6600;
            color: #fff;
        }
        .ivu-table .demo-table-info-cell-address {
            background-color: #187;
            color: #fff;
        }
    </style>
</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="80">
                    <form-item label="负责人:">
                        <i-select v-model="kuCunPdVo.userId" style="width: 110px" filterable>
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in userList" :value="item.id" :key="item.id">{{item.username}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="操作日期:">
                        <row>
                            <col span="12"> <date-picker  format="yyyy-MM-dd HH:mm" @on-change="kuCunPdVo.startDate=$event"  placeHolder="请输入起始日期" style="width: 150px" type="datetime" ></date-picker></col>
                            <col span="12"> <date-picker  format="yyyy-MM-dd HH:mm" @on-change="kuCunPdVo.endDate=$event"   placeHolder="请输入结束日期" style="width: 150px" type="datetime" ></date-picker></col>
                        </row>
                    </form-item>
                    <form-item label="仓库:">
                        <i-select v-model="kuCunPdVo.cangkuId" style="width: 110px" filterable>
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in cangkuList" :value="item.id" :key="item.id">{{item.cangkuName}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="商品编码:">
                        <i-input type="text" v-model="kuCunPdVo.goodsCode" style="width: 145px"/>
                    </form-item>
                    <form-item label="商品名称:">
                        <i-select v-model="kuCunPdVo.goodsId" style="width: 110px" filterable>
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in goodsList" :value="item.id" :key="item.id">{{item.name}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="盘点结果:">
                        <i-select v-model="kuCunPdVo.result" style="width: 110px" filterable>
                            <i-option value="">--不限--</i-option>
                            <i-option value="2">存在误差</i-option>
                            <i-option value="1">一致</i-option>
                        </i-select>
                    </form-item>
       <i-button type="primary"icon="ios-search" style="margin-left:20px" @click="pageNo=1;searchKuCunPdList();">搜索</i-button>
                    <i-button type="success"icon="md-sync" @click="kuCunPdVo={};searchKuCunPdList();pageNo=1"></i-button>
                </i-form>
            </p>
        </Panel>
    </Collapse>
    <i-table  :row-class-name="rowClassName" :columns="Columns1"  :data="pageResult.rows" :height="300" border stripe  >
        <template slot-scope="{row}" slot="username">
            <span>{{ row.user.username}}</span>
        </template>
        <template slot-scope="{row}" slot="cangkuName">
            <span>{{ row.cangku.cangkuName}}</span>
        </template>
        <template slot-scope="{row}" slot="name">
            <span>{{ row.goods.name}}</span>
        </template>
        <template  slot-scope="{row}" slot="result">
            <span>{{row.result==1?"一致":"存在误差"}}</span>
        </template>
    </i-table>
    <Page :total="pageResult.total"
          :page-size="pageSize"
    <%-- :current.sync="pageNo"--%>
          @on-change="pageNo=arguments[0];searchKuCunPdList();"
    <%--:current.sync="pageNo"-->
<%-- @on-change="searchUserList"--%>

          show-sizer
          :page-size-opts="[5,10,15]"
    <%-- @on-page-size-change="changPageSize"--%>
          @on-page-size-change="pageSize=arguments[0];searchKuCunPdList();"
    />
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            Columns1:[
                {key:"id",title:"编号",width:"60",align:"center"},
                {slot:"username",title:"负责人",width:"100",align:"center"},
                {key:"opertime",title:"操作日期",width:"130",align:"center"},
                {slot:"cangkuName",title:"仓库",width:"80",align:"center"},
                {key:"goodsCode",title:"商品编号",width:"120",align:"center"},
                {slot:"name",title:"商品",width:"120",align:"center"},
                {key:"num",title:"记录数量",width:"85",align:"center"},
                {key:"searchNum",title:"实际数量",width:"85",align:"center"},
                {slot:"result",title:"盘点结果",width:"70",align:"center"},
                {key:"beizhu",title:"备注(原因）",align:"center"},
            ],
            pageResult:{
                rows:[],
                total:50,
            },
            kuCunPdVo:{},
            goodsList:[],
            cangkuList:[],
            cangkuKuCun:{},
            kuCunPanDian:{},
            pageNo:1,
            pageSize:5,
            userList:[]
        },
        methods:{
            searchKuCunPdList(){
                axios.get(`${ctx}/kucun/kcpd/search/${this.pageNo}/${this.pageSize}`,{params:this.kuCunPdVo})
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },

            searchGoodsList(){
                axios.get(`${ctx}/jibenxinxi/sp/list`)
                    .then(({data})=>{
                        this.goodsList=data.result;
                    });
            },
            searchCangkuList(){
                axios.get(`${ctx}/jibenxinxi/ck/list`)
                    .then(({data})=>{
                        this.cangkuList=data.result;
                    });
            },
            searchUserList(){
                axios.get(`${ctx}/renshi/user/Kglist`)
                    .then(({data})=>{
                        this.userList=data.result;
                    });
            },
        },
        rowClassName (row, index) {
            if (index === 1) {
                return 'demo-table-info-row';
            } else if (index === 3) {
                return 'demo-table-error-row';
            }
            return '';
    },
        mounted(){
            this.searchKuCunPdList();
            this.searchGoodsList();
            this.searchCangkuList();
            this.searchUserList();
        }
    });
</script>
</body>
</html>
